<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>下载统计 </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/admin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/admin/style/admin.css" media="all">
</head>
<body>
<div class="layui-fluid">

    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">请选择查询时间范围</div>
            <div class="layui-card-body" pad15>
                <div class="layui-form" wid100>
                    <form class="layui-form" action="">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">日期范围：</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input laydate-item" name="sdate">
                                </div>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input laydate-item" name="edate">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-submit lay-filter="search">查 询</button>
                            </div>
                        </div>
                    </form>
                </div>

            </div>
        </div>
    </div>

    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">下载数据查看</div>
            <div class="layui-card-body">
                    <div carousel-item id="dataview" style="width: 100%; height: 500px"> </div>
            </div>
        </div>
    </div>
</div>
<script src="/static/admin/layui/layui.js"></script>
<script src="/static/admin/lib/echarts.simple.min.js"></script>
<script>
    layui.config({
        base: '/static/admin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'laydate', 'form'], function(){
        var admin = layui.admin
            ,$ = layui.$
            ,laydate = layui.laydate
            ,form = layui.form;

        lay('.laydate-item').each(function(){
            laydate.render({
                elem: this
                ,trigger: 'click'
            });
        });

        var myChart = echarts.init(document.getElementById('dataview'));
        var option = {
            title: {
                text: '下载数据统计'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'下载 ',
                    type:'line',
                    stack: '篇',
                    data:[]
                }
            ]
        };
        myChart.setOption(option);

        $.post("{:url('')}",{
            userid: "",
            starttime: "",
            endtime:""
        },function (data) {
            myChart.setOption({
                xAxis: {
                    data: data.d
                },
                series: [{
                    data: data.n
                }]
            });
        });


        //监听提交
        form.on('submit(search)', function(data){
            myChart.showLoading();
            $.post("{:url('')}",{
                userid: "",
                starttime: data.field.sdate,
                endtime: data.field.edate
            },function (data) {
                myChart.hideLoading();
                myChart.setOption({
                    xAxis: {
                        data: data.d
                    },
                    series: [{
                        data: data.n
                    }]
                });
            });

            return false;
        });

        window.onresize=myChart.resize;
    });
</script>
</body>
</html>